
<!-- 线索统计 -->
<template>
  <div>
    <div class="box">
      <el-row type="flex" class="row-bg" justify="space-between">
        <el-col :span="9">
          <div class="left">
            <span class="time">时间:</span>
            <el-date-picker
              v-model="value1"
              type="daterange"
              range-separator="~"
              value-format="yyyy-MM-dd"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="editDate"
            />
          </div>
        </el-col>
        <el-col :span="4.5">
          <div class="right">
            <el-tabs v-model="activeName" class="custom-tabs" type="card" @tab-click="handleClick">
              <el-tab-pane label="新增线索数量" name="first" />
              <el-tab-pane label="线索转化率" name="second" />
            </el-tabs>
          </div>
        </el-col>
      </el-row>

    </div>
    <!-- 图例 -->
    <div v-show="isShow" class="legend">
      <div id="chartss" style="width: 1300px; height: 350px;" />
    </div>
    <div v-show="onShow" class="legend-two">
      <div id="twoChartss" style="width: 500px; height: 350px; margin-left: 400px;" />
    </div>
    <div>
      <div class="tap">
        <span class="text">线索统计报表</span>

        <el-row>
          <el-button type="primary" class="export">导出</el-button>
        </el-row>
      </div>
      <div class="floor">
        <span>高级搜索</span>
      </div>
      <!-- 搜索区域 -->
      <div class="search">
        <el-form label-width="100px">
          <el-row class="search_row">
            <el-col :span="8">
              <el-form-item label="线索编号：">
                <el-select v-model="value" placeholder="请选择活动区域" style="width: 280px;">
                  <el-option label="区域一" value="shanghai" />
                  <el-option label="区域二" value="beijing" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="归属人：">
                <el-select v-model="value" placeholder="请选择活动区域" style="width: 280px;">
                  <el-option label="区域一" value="shanghai" />
                  <el-option label="区域二" value="beijing" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="归属部门：">
                <el-select v-model="value" placeholder="请选择活动区域" style="width: 280px;">
                  <el-option label="区域一" value="shanghai" />
                  <el-option label="区域二" value="beijing" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item class="search_btn">
                <el-button class="cus-reset-btn">重置</el-button>
                <el-button class="cus-search-btn" type="primary">搜索</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <!-- 列表区域 -->
      <div>
        <el-table class="cus-table-box" stripe :data="list">
          <el-table-column type="selection" width="62" align="center" />
          <el-table-column label="线索编号" align="center" prop="id" />
          <el-table-column label="手机号" align="center" prop="phone" />
          <el-table-column label="归属人部门" align="center" />
          <el-table-column label="归属人" align="center" prop="owner" />
          <el-table-column label="渠道来源" align="center" prop="channel" :formatter="formChannel" />
          <el-table-column label="活动详情" align="center" prop="code" :formatter="formCode" />
          <el-table-column label="线索状态" align="center" prop="clueStatus" :formatter="formClueStatus" />
          <el-table-column label="创建时间" sortable align="center" prop="clueCreateTime" />
        </el-table>
        <!-- 分页 -->
        <div class="block">
          <el-pagination
            :current-page="params.page"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="params.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { getclueListApi, getclueEchartsApi, getclueEchartApi } from '@/api/clue'
export default {
  data() {
    return {
      value: '',
      value1: [],
      activeName: 'first',
      isShow: true,
      onShow: false,
      oneEcharts: [],
      twoEcharts: [],
      params: {
        page: 1,
        pageSize: 10
      },
      total: 0,
      list: [],
      beginCreateTime: [], // 开始时间
      endCreateTime: [] // 结束时间

    }
  },
  mounted() {
    /**
     * 第一个图例
     */
    this.initCharts()
    /**
     * 第二个图例
     */
    this.twoCharts()
  },
  created() {
    this.getclueList()
    this.getclueEchart()
  },
  methods: {
    /**
     * 第一个图例
     */
    initCharts() {
      const myChart = echarts.init(document.getElementById('chartss'))
      // 绘制图表
      const option = {
        title: {
          text: '新增线索数量'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },

        // 横向行
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            // data:
            data: this.oneEcharts
          }
        ],

        yAxis: [
          {
            type: 'value',
            name: '单位(个)'
          }
        ],

        series: [
          // 行
          {
            name: '新增线索',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: [150, 232, 201, 305, 506, 205, 120] // 总量的数据
          }
          // 列

        ]
      }
      myChart.setOption(option)
      window.addEventListener('resize', function() {
        myChart.resize()
      })
    },

    /**
     * 第二个图例
     */
    twoCharts() {
      const myChart = echarts.init(document.getElementById('twoChartss'))
      // 绘制图表
      const option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c}%'
        },
        toolbox: {
          feature: {
            dataView: { readOnly: false },
            restore: {},
            saveAsImage: {}
          }
        },
        legend: {
          data: ['Show', 'Click', 'Visit', 'Inquiry', 'Order']
        },
        series: [
          {
            name: 'Funnel',
            type: 'funnel',
            left: '10%',
            top: 60,
            bottom: 60,
            width: '80%',
            min: 0,
            max: 100,
            minSize: '0%',
            maxSize: '100%',
            sort: 'descending',
            gap: 2,
            label: {
              show: true,
              position: 'inside'
            },
            labelLine: {
              length: 10,
              lineStyle: {
                width: 1,
                type: 'solid'
              }
            },
            itemStyle: {
              borderColor: '#fff',
              borderWidth: 1
            },
            emphasis: {
              label: {
                fontSize: 20
              }
            },
            data: [
              { value: 60, name: 'Visit' },
              { value: 40, name: 'Inquiry' },
              { value: 20, name: 'Order' },
              { value: 80, name: 'Click' },
              { value: 100, name: 'Show' }
            ]
          }
        ]
      }

      myChart.setOption(option)
      window.addEventListener('resize', function() {
        myChart.resize()
      })
    },
    /**
     * 时间改变
     */
    editDate(val) {
      this.getclueEcharts(val[0], val[1])
      this.getclueEchart(val[0], val[1])
    },
    /**
     * 第一个图 新增线索统计
     */
    async getclueEchart(data1, data2) {
      const { data } = await getclueEchartApi(data1, data2)
      // console.log(data)
      this.oneEcharts = data.xAxis
      this.initCharts()
      // localStorage.setItem('xsone', JSON.stringify(data.xAxis))
      // const res = localStorage.getItem('xsone')
      // this.newXAxis = JSON.parse(res)
      // console.log(this.newXAxis)
    },

    /**
     * 第二个图
     * @param {*} data1
     * @param {*} data2
     */
    async getclueEcharts(data1, data2) {
      const { data } = await getclueEchartsApi(data1, data2)
      console.log(data)
      // localStorage.setItem('newXAxis', JSON.stringify(data.xAxis))
      // // this.newXAxis = data.xAxis
      // const res = localStorage.getItem('newXAxis')
      // //
      // this.newXAxis = JSON.parse(res)
      // this.initCharts()
      // console.log(this.newXAxis)
    },
    /**
     * 分页
     * @param {*} page
     */
    handleCurrentChange(page) {
      this.params.page = page
      this.getclueList()
    },
    /**
     * 处理线索状态
     * @param {*} e
     */
    formClueStatus(e) {
      if (e.clueStatus === '2') {
        return '跟进中'
      } else {
        return '待跟进'
      }
    },
    /**
     * 处理活动详情
     * @param {*} e
     */
    formCode(e) {
      return e.code + e.info
    },
    /**
     * 处理渠道来源
     * @param {*} e
     */
    formChannel(e) {
      if (e.channel === '0') {
        return '线上活动'
      } else {
        return '推广活动'
      }
    },
    /**
     * 渲染列表
     */
    async getclueList() {
      const res = await getclueListApi(this.params)
      // console.log(res)
      this.list = res.data.records
      this.total = res.data.total
    },
    /**
     * 点击切换图例
     */
    handleClick() {
      if (this.activeName === 'first') {
        this.isShow = true
        this.onShow = false
      }
      if (this.activeName === 'second') {
        this.isShow = false
        this.onShow = true
      }
    }
  }
}
</script>

<style scoped lang="scss">
.box{
    margin-top: 20px;
    margin-bottom: 100px;
    .left{
      display: inline;
    }
    .right{
      display: inline;
    }
}
 .legend{
    height: 300px;
    background-color: transparent;
    margin-bottom: 70px;
 }
 .legend-two{
  height: 300px;
  background-color: transparent;
    margin-bottom: 70px;
 }
.time{
    margin-right: 10px;
}

.tap{
    display: flex;
    height: 40px;
    margin-bottom: 10px;
    justify-content: space-between;

}
.text{
    line-height: 40px;
    margin-left: 10px;
}
.export{
  // margin-top: -50px;
  height: 40px;
  text-align: center;
  // line-height: 40px;
}
.floor{
    height: 40px;
    background-color: #f2f2f2;
    span{
        line-height: 40px;
        margin-left: 10px;
    }
}
.search{
    height: 200px;
}
.search_row{
  padding-top: 25px;
  padding-left: 50px;
}
.search_btn{
  margin-right: 55px;
 text-align: right;
}
.block{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}
</style>
